<template>
    <div>
        <el-form
            :inline="true"
            :model="trainingapply_query"
            class="demo-form-inline"
        >
            <el-form-item label="ID">
                <el-input
                    v-model="trainingapply_query.id"
                    placeholder="请输入ID"
                    clearable
                />
            </el-form-item>
            <el-form-item label="申请课程名">
                <el-input
                    v-model="trainingapply_query.lectureName"
                    placeholder="请输入课程名"
                    clearable
                />
            </el-form-item>
            <el-form-item label="公司名">
                <el-input
                    v-model="trainingapply_query.companyName"
                    placeholder="请输入公司名"
                    clearable
                />
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="onQuery"
                >查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button
                    type="primary"
                    @click="onReload"
                >重置</el-button>
            </el-form-item>
        </el-form>

        <el-divider content-position="left">未制定培训计划的培训申请</el-divider>
        <el-table
            :data="unhandledDataList.comList"
            style="width: 100%"
        >
            <el-table-column
                label="ID"
                prop="id"
            />
            <el-table-column
                label="申请课程名"
                prop="lectureName"
            />
            <el-table-column
                label="公司名"
                prop="applicationCompany"
            />
            <el-table-column align="right">
                <template #default="scope">
                    <el-button
                        size="small"
                        @click="unhandleDetail(scope.$index, scope.row)"
                    >详情</el-button>
                    <el-button
                        size="small"
                        @click="unhandleEdit(scope.$index, scope.row)"
                    >制定培训计划</el-button>
                    <el-popconfirm
                        title="确认删除?"
                        @confirm="unhandleDelete(scope.$index, scope.row)"
                    >
                        <template #reference>
                            <el-button
                                size="small"
                                type="danger"
                            >删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @current-change="unhandledCurrentChange"
            @size-change="unhandledSizeChange"
            background
            layout="prev, pager, next"
            :total="unhandledData.selectData.count"
            :default-page-size="unhandledData.selectData.pagesize"
        />

        <br>
        <el-divider content-position="left">已制定培训计划的培训申请</el-divider>
        <el-table
            :data="handledDataList.comList"
            style="width: 100%"
        >
            <el-table-column
                label="ID"
                prop="id"
            />
            <el-table-column
                label="申请课程名"
                prop="lectureName"
            />
            <el-table-column
                label="公司名"
                prop="applicationCompany"
            />
            <el-table-column align="right">
                <template #default="scope">
                    <el-button
                        size="small"
                        @click="handleDetail(scope.$index, scope.row)"
                    >详情</el-button>
                    <el-button
                        size="small"
                        @click="handleEdit(scope.$index, scope.row)"
                    >查看或修改课程</el-button>
                    <el-popconfirm
                        title="确认删除?"
                        @confirm="handleDelete(scope.$index, scope.row)"
                    >
                        <template #reference>
                            <el-button
                                size="small"
                                type="danger"
                            >删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            @current-change="handledCurrentChange"
            @size-change="handledSizeChange"
            background
            layout="prev, pager, next"
            :total="handledData.selectData.count"
            :default-page-size="handledData.selectData.pagesize"
        />
    </div>

    <el-dialog
        v-model="dialogFormVisible"
        :title="curRow?.lectureName"
        align-center
    >
        <el-form
            ref="TrainingPlanForm"
            :model="TrainingPlan"
            :rules="TrainingPlanRules"
        >
            <el-form-item
                label="课程名称"
                prop="lectureName"
            >
                <el-input
                    v-model="TrainingPlan.lectureName"
                    disabled
                    autocomplete="off"
                />
            </el-form-item>
            <el-form-item
                label="讲师ID"
                prop="teacherId"
            >
                <el-input
                    v-model="TrainingPlan.teacherId"
                    autocomplete="off"
                />
            </el-form-item>
            <el-form-item
                label="培训费用"
                prop="trainningCost"
            >
                <el-input
                    v-model="TrainingPlan.trainningCost"
                    autocomplete="off"
                />
            </el-form-item>
            <el-form-item
                label="培训内容"
                prop="trainningContent"
            >
                <el-input
                    v-model="TrainingPlan.trainningContent"
                    type="textarea"
                    autocomplete="off"
                />
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    @click="onSubmit('TrainingPlanForm')"
                >
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>

    <el-dialog
        v-model="dialogDetailVisible"
        title="培训申请详情"
        align-center
    >
        <el-descriptions :column="1">
            <el-descriptions-item label="申请课程名">
                {{ curRow?.lectureName }}
            </el-descriptions-item>

            <el-descriptions-item label="公司名">
                {{ curRow?.applicationCompany }}
            </el-descriptions-item>

            <el-descriptions-item label="申请时间">
                {{ curRow?.createTime }}
            </el-descriptions-item>

            <el-descriptions-item label="负责人联系电话">
                {{ curRow?.phone }}
            </el-descriptions-item>
        </el-descriptions>
    </el-dialog>
</template>
    
<script lang="ts">
import {
    getCurrentInstance, inject, reactive,
    onMounted, computed, ref
} from "vue";
import { trainingapply_query, TrainingApplyData, TrainingApplyListData } from "@/utils/manage_TrainingApplyValidators"
import { TrainingPlan, TrainingPlanRules } from "@/utils/manage_TrainingPlanValidators"
import { ElMessage } from 'element-plus'
export default {
    setup() {
        const dialogFormVisible = ref(false);
        const dialogDetailVisible = ref(false);
        //@ts-ignore
        const { ctx } = getCurrentInstance();
        const axios = inject('axios');
        const data = reactive(new TrainingApplyListData());
        const handledData = reactive(new TrainingApplyListData());
        const unhandledData = reactive(new TrainingApplyListData());
        const curRow = ref<TrainingApplyData>();
        const isHandled = ref(false);

        onMounted(() => {
            getTrainingApplyData();
        });

        const getTrainingApplyData = () => {
            //@ts-ignore
            axios.get("/api/trainningApplication/queryList",
                {
                    params: {
                        deleted: false,
                    }
                    //@ts-ignore
                }).then((res) => {
                    if (res.status === 200 && res.data.success === true) {
                        data.TrainingApplyList = res.data.data;
                        data.selectData.count = res.data.data.length;

                        handledData.TrainingApplyList = data.TrainingApplyList.filter(item => item.isGeneratePlan === true);
                        unhandledData.TrainingApplyList = data.TrainingApplyList.filter(item => item.isGeneratePlan === false);
                        handledData.selectData.count = handledData.TrainingApplyList.length;
                        unhandledData.selectData.count = unhandledData.TrainingApplyList.length;
                    } else {
                        alert("未请求到\"培训申请\"信息")
                    }
                });
        };

        const unhandledDataList = reactive({
            comList: computed(() => {
                return unhandledData.TrainingApplyList.slice(
                    (unhandledData.selectData.page - 1) * unhandledData.selectData.pagesize,
                    unhandledData.selectData.page * unhandledData.selectData.pagesize
                );
            }),
        });

        const handledDataList = reactive({
            comList: computed(() => {
                return handledData.TrainingApplyList.slice(
                    (handledData.selectData.page - 1) * handledData.selectData.pagesize,
                    handledData.selectData.page * handledData.selectData.pagesize
                );
            }),
        });

        const unhandledCurrentChange = (page: number) => {
            unhandledData.selectData.page = page;
        };
        const unhandledSizeChange = (pagesize: number) => {
            unhandledData.selectData.pagesize = pagesize;
        };

        const handledCurrentChange = (page: number) => {
            handledData.selectData.page = page;
        };
        const handledSizeChange = (pagesize: number) => {
            handledData.selectData.pagesize = pagesize;
        };

        const unhandleDetail = (index: number, row: TrainingApplyData) => {
            console.log(index, row);
            dialogDetailVisible.value = true;
            curRow.value = row;
        }
        const unhandleEdit = (index: number, row: TrainingApplyData) => {
            console.log(index, row)
            dialogFormVisible.value = true;
            curRow.value = row;
            isHandled.value = false;
            //@ts-ignore
            TrainingPlan.value = {
                lectureName: row.lectureName,
                teacherId: 0,
                trainningContent: "",
                trainningCost: 0,
            }
        }
        const unhandleDelete = (index: number, row: TrainingApplyData) => {
            //@ts-ignore
            axios.get("/api/trainningApplication/delete",
                {
                    params: {
                        id: row.id,
                    }
                    //@ts-ignore
                }).then((res) => {
                    if (res.status === 200 && res.data.success === true) {
                        ElMessage({
                            message: '成功删除',
                            type: 'success',
                        })
                        location.reload();
                    } else {
                        alert("未请求到\"培训申请\"信息")
                    }
                });
        }

        const handleDetail = (index: number, row: TrainingApplyData) => {
            console.log(index, row);
            dialogDetailVisible.value = true;
            curRow.value = row;
        }
        const handleEdit = (index: number, row: TrainingApplyData) => {
            console.log(index, row)
            dialogFormVisible.value = true;
            curRow.value = row;
            isHandled.value = true;
            //@ts-ignore
            axios.get("/api/trainningPlan/detail", {
                params: {
                    id: curRow.value.trainningPlanId,
                }
                //@ts-ignore
            }).then((res) => {
                if (res.status === 200 && res.data.success === true) {
                    console.log(res.data);
                    TrainingPlan.value.lectureName = res.data.data.lectureName;
                    TrainingPlan.value.teacherId = res.data.data.teacherId;
                    TrainingPlan.value.trainningContent = res.data.data.trainningContent;
                    TrainingPlan.value.trainningCost = res.data.data.trainningCost;
                }
            });

        }
        const handleDelete = (index: number, row: TrainingApplyData) => {
            //@ts-ignore
            axios.get("/api/trainningApplication/delete",
                {
                    params: {
                        id: row.id,
                    }
                    //@ts-ignore
                }).then((res) => {
                    if (res.status === 200 && res.data.success === true) {
                        ElMessage({
                            message: '成功删除',
                            type: 'success',
                        })
                        location.reload();
                    } else {
                        alert("未请求到\"培训申请\"信息")
                    }
                });
        }

        interface QParams {
            deleted: boolean;
            id?: string;
            lectureName?: string;
            applicationCompany?: string;
        }

        const onQuery = () => {
            const { id, lectureName, companyName } = trainingapply_query;
            let q_params: QParams = { deleted: false };
            var allowQuery = false;
            if (id != "" && /^[0-9]*$/.test(id)) {
                q_params.id = id;
                allowQuery = true;
            }
            if (lectureName != "") {
                q_params.lectureName = lectureName;
                allowQuery = true;
            }
            if (companyName != "") {
                q_params.applicationCompany = companyName;
                allowQuery = true;
            }
            if (allowQuery) {
                //@ts-ignore
                axios.get("/api/trainningApplication/queryList",
                    {
                        params: q_params
                        //@ts-ignore
                    }).then((res) => {
                        if (res.status === 200 && res.data.success === true) {
                            console.log(res.data);
                            data.TrainingApplyList = res.data.data;
                            data.selectData.count = res.data.data.length;

                            handledData.TrainingApplyList = data.TrainingApplyList.filter(item => item.isGeneratePlan === true);
                            unhandledData.TrainingApplyList = data.TrainingApplyList.filter(item => item.isGeneratePlan === false);
                            handledData.selectData.count = handledData.TrainingApplyList.length;
                            unhandledData.selectData.count = unhandledData.TrainingApplyList.length;
                        } else {
                            alert("未请求到\"培训申请\"信息")
                        }
                    });
            }
        };

        const onReload = () => {
            location.reload();
        }

        const onSubmit = (formName: any) => {
            ctx.$refs[formName].validate((valid: boolean) => {
                if (valid) {
                    if (isHandled.value) {
                        //@ts-ignore
                        axios.put("/api/trainningPlan/update", {
                            "id": curRow.value?.trainningPlanId,
                            "lectureName": TrainingPlan.value.lectureName,
                            "teacherId": TrainingPlan.value.teacherId,
                            "trainningApplicationId": curRow.value?.id,
                            "trainningContent": TrainingPlan.value.trainningContent,
                            "trainningCost": TrainingPlan.value.trainningCost,
                        }, {
                            headers: { 'Content-Type': 'application/json' }
                            //@ts-ignore
                        }).then((res) => {
                            if (res.status === 200 && res.data.success === true) {
                                console.log(res);
                                dialogFormVisible.value = false;
                                location.reload();
                            }
                            else {
                                alert("提交失败！");
                                return false;
                            }
                        })
                    } else {
                        //@ts-ignore
                        axios.post("/api/trainningPlan/add", {
                            "lectureName": TrainingPlan.value.lectureName,
                            "teacherId": TrainingPlan.value.teacherId,
                            "trainningApplicationId": curRow.value?.id,
                            "trainningContent": TrainingPlan.value.trainningContent,
                            "trainningCost": TrainingPlan.value.trainningCost,
                        }, {
                            headers: { 'Content-Type': 'application/json' }
                            //@ts-ignore
                        }).then((res) => {
                            if (res.data.success === true) {
                                console.log(res);
                                dialogFormVisible.value = false;
                                location.reload();
                            }
                            else {
                                alert("提交失败！");
                                return false;
                            }
                        })
                    }

                } else {
                    alert("表单校验不通过，提交失败!");
                    return false;
                }
            })
        };

        return {
            unhandledData, handledData, trainingapply_query, dialogFormVisible, dialogDetailVisible,
            onQuery, handleDelete, handleEdit, handleDetail, TrainingPlan, TrainingPlanRules, onSubmit,
            curRow, unhandledDataList, handledDataList, unhandledCurrentChange, handledCurrentChange,
            unhandledSizeChange, handledSizeChange, unhandleDelete, unhandleEdit, unhandleDetail, onReload,
        };
    },
};
</script>
    
<style scoped></style>